<template>
  <h3>Images 呵呵</h3>
  <h5 ref="title">v-lazy</h5>
  <Progress></Progress>
  <div class="lazy-load">
    <img
      v-for="(src, index) in imagesList"
      :key="index"
      :data-src="src"
      alt="Lazy Loaded Image"
      ref="imageRefs"
      class="lazy-image"
    />
  </div>
  <div style="height: 5vh"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
const imagesList = ref<string[]>([]);
const title = ref(null);
const imageRefs = ref<HTMLElement[]>([]);
onMounted(async () => {
  const modules = import.meta.glob("/src/assets/images/*.*");
  for (const path in modules) {
    const module = (await modules[path]()) as { default: string };
    imagesList.value.push(module.default);
  }
  console.log(imagesList.value);
  setTimeout(() => {
    console.log(imageRefs.value);
    console.log(imageRefs.value.length);
  }, 320);
  console.log(title.value);
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = entry.target as HTMLImageElement;
          img.src = img.dataset.src!;
          observer.unobserve(img);
        }
      });
    },
    { rootMargin: "0px", threshold: 0.1 }
  );
  setTimeout(() => {
    imageRefs.value.forEach((el) => {
      console.log(el);
      observer.observe(el);
    });
  }, 320);
});
</script>
